<template>
    <div class="header">
        <div class="header-left">
            <img class='logoImg' src="../../../assets/img/logo-2x.png" />
            <router-link to="/city">
                <div class="city">{{this.$store.state.city}}<span class="iconfont">&#xe60c;</span></div>
            </router-link>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe632;</span>
            合肥
        </div>
        <div class="header-right">导航<span class="iconfont">&#xe60c;</span></div>
    </div>
    
</template>
<script>
export default {
    name:'HomeHeader'
}
</script>
<style lang='stylus' scoped>
.header
    display :flex   
    line-height: .86rem
    background: #2dbb55
    color: #fff
    .header-left
        width: 2rem
        line-height:.86rem
        float: left
        .city
          font-size : .3rem
          color:#fff
          overflow :hidden
          white-space :nowrap
          text-overflow :ellipsis
          .iconfont
            font-size:.05rem
            padding-left:.05rem
        .logoImg
          display :block
          width:.63rem 
          height : .65rem
          margin-top: .12rem
          margin-left:.18rem
          margin-right:.18rem
          float:left
    .header-input
        flex:1
        height : .58rem
        line-height: .58rem
        background: #fff
        margin-top: .15rem
        border-radius: .06rem
        color:#999
        font-size:.25rem
        .iconfont
            font-size:.32rem
            padding-left:.12rem
    .header-right
        width: 1.24rem 
        font-size : .3rem
        float: right
        text-align: center
        margin-left:.32rem
        .iconfont
            font-size:.32rem
            padding-left:.12rem 
</style>
